<template>
  <view>
    <!-- 搜索组件 -->
    <nav-bar @load="handleLoadNav">
      <view class="uni-easyinput-head">
        <uni-easyinput prefixIcon="search" v-model="query" disableColor="#fff" placeholder="请输入内容"
          @confirm="handleGoodsQuery" @clear="handleGoodsQuery" @input="handleGoodsQuery(query)">
        </uni-easyinput>
      </view>
    </nav-bar>

    <view class="tabs">
      <tabs-component :data="usedTabText" :active="active" width="33%" @change="handleNavChange">
      </tabs-component>
    </view>

    <view class="content-container" :style="{ height: contentHeight + 'px' }">
      <custom-scroll-view :loadData="handleLoadData" refresherBackground="#e8ebed" ref="listRef" emptyText="暂无商品">
        <template v-slot="{data}">
          <view>
            <view class="waterfalls-flow-container">
              <!-- https://ext.dcloud.net.cn/plugin?id=7594 -->
              <custom-waterfalls-flow :value="data.data" ref="waterfallsFlowRef" :column="2" imageKey="goodsImage"
                :listStyle="{
                marginBottom:'32rpx',
                boxShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.1)',
                boxSizing:'border-box'
              }" imgMaxHeight="400px" @wapperClick="handleItemClick" @imageClick="handleItemClick">
                <!-- #ifdef MP-WEIXIN -->
                <view class="info-container" v-for="(item,index) in data.data" :key="index" slot="slot{{index}}">
                  <text class="title">{{item.goodsName}}</text>
                  <view class="item-info">
                    <image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
                    <text class="user-info-name">{{item.userName}}</text>
                    <text class="user-info-price">￥{{item.goodsPrice}}</text>
                  </view>
                </view>
                <!-- #endif -->

                <!-- #ifndef MP-WEIXIN -->
                <template v-slot:default="item">
                  <view class="info-container">
                    <text class="title">{{item.goodsName}}</text>
                    <view class="item-info">
                      <image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
                      <text class="user-info-name">{{item.userName}}</text>
                      <text class="user-info-price">￥{{item.goodsPrice}}</text>
                    </view>
                  </view>
                </template>
                <!-- #endif -->
              </custom-waterfalls-flow>
            </view>
          </view>
        </template>
      </custom-scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    getSearchIntactGoodsApi,
  } from '@/api/used/used.js'

  export default {

    data() {
      return {
        query: '', //搜索关键词
        placeholder: '请输入搜索内容', //placeholder的值
        active: 0, //当前选中项
        sort: 0,
        //分类数据
        usedTabText: [{
          text: '最新',
          id: "0"
        }, {
          text: '最热',
          id: '1',
        }, {
          text: '价格',
          id: "2",
          sort: true,
          sortValue: false
        }],
        contentHeight: 0, //滚动内容高度
        familyId: 0
      };
    },
    onLoad(e) {
      this.familyId = e.familyId ? e.familyId : 0;
      this.familyName = e.familyName ? e.familyName : ''
      this.$nextTick(() => {
        this.handleNavChange(0);
      })
    },
    methods: {
      handleLoadNav({
        navHeight,
        height
      }) {
        const query = uni.createSelectorQuery().in(this);
        query.select('.tabs').boundingClientRect(data => {
          this.contentHeight = height - navHeight - data.height;
        }).exec();
      },
      // 加载数据
      async handleLoadData(page) {
        page == 1 && this.$refs.waterfallsFlowRef && this.$refs.waterfallsFlowRef.refresh()
        let {
          data: res
        } = await getSearchIntactGoodsApi(page, this.familyId, this.sort, this.query);
        let records = res.success ? res.data.records : [];
        let pages = res.success ? res.data.pages : 0;
        records = records.map((item) => {
          const imgArr = item.goodsImage.split(';');
          item.goodsImage = imgArr ? imgArr[0] : '';
          return item;
        })
        return {
          success: res.success,
          data: records,
          pages: pages
        }
      },
      //导航栏点击切换
      handleNavChange(index) {
        if (index == 2 && this.active == index) {
          if (this.active == index) {
            this.usedTabText[index].sortValue = !this.usedTabText[index].sortValue
          }
          this.sort = this.usedTabText[index].sortValue ? 3 : index;
        } else {
          this.sort = index;
        }
        this.active = index

        this.$refs.listRef.handleRefresherLoad();
      },
      handleGoodsQuery(query) {
        this.query = query;
        this.$refs.listRef.handleRefresherLoad();
      },
      // 点击商品
      handleItemClick(item) {
        uni.navigateTo({
          url: '/pages/used/product-details/product-details?id=' + item.goodsId,
        });
      }
    }
  }
</script>

<style lang="scss">
  .paging {
    width: 100%;
    margin: 20rpx 0rpx;
    text-align: center;
    color: #AEAEAE;
    font-size: 24rpx;
  }

  .content-container {
    width: 100%;
    height: calc(100vh - var(--window-bottom) - 200rpx);

    .arc-container {
      width: 100%;
      height: 80rpx;
      background: #3FD3D1;
      border-radius: 0rpx 0rpx 50% 50%;
    }

    .swiper-container {
      padding: 0px 16px 0 16px;

      .swiper-view {
        margin-top: -45rpx;
        margin-bottom: 38rpx;
        height: 220rpx;
        width: 100%;

        .image-container {
          height: 100%;
          width: 100%;
          border-radius: 16rpx;
        }
      }
    }

    .classify-container {
      padding: 0px 16px 0 16px;

      .used-classify {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .user-classify-item {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          image {
            width: 100rpx;
            height: 100rpx;
          }

          text {
            font-size: 24rpx;
          }
        }
      }

    }


    .used-recommend-container {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: #fff;
      padding: 24rpx 16px 24rpx 16px;

      .container {
        height: 65rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .right {
        width: 200rpx;
      }
    }

    .waterfalls-flow-container {
      padding: 32rpx;
      box-sizing: border-box;

      .waterfalls-flow {
        padding: 0 4rpx;
      }

      .info-container {
        padding: 16rpx;
        box-sizing: border-box;

        .title {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-info {
          margin-top: 20rpx;
          display: flex;
          align-items: center;

          image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 48rpx;
            flex-shrink: 0;
          }

          .user-info-name {
            font-size: 24rpx;
            font-weight: 350;
            color: #666666;
            margin-left: 16rpx;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .user-info-price {
            flex-shrink: 0;
            font-size: 32rpx;
            font-weight: 700;
            color: #FF756A;
            text-align: right;
          }
        }

      }

    }
  }
</style>